<template>
	<!-- form 查询表单 -->
	<el-form style="padding-bottom: 10px;" ref="selectFormRef" :model="user" label-width="auto" label-position="right">
		<el-row :gutter="30">
			<el-col :span="8">
				<el-form-item label="用户昵称" prop="user_name">
					<el-input v-model="user.user_name" placeholder="用户昵称" clearable />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="用户邮箱" prop="user_email">
					<el-input v-model="user.user_email" placeholder="用户邮箱" clearable />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="用户手机号" prop="user_sjh">
					<el-input v-model="user.user_sjh" placeholder="用户手机号" clearable />
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="30">
			<el-col :span="8">
				<el-form-item label="用户性别" prop="user_sex">
					<el-select v-model="user.user_sex" placeholder="用户性别" clearable>
						<el-option label="男" value="1" />
						<el-option label="女" value="2" />
						<el-option label="未知" value="3" />
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="创建时间" prop="createDate">
					<el-input v-model="user.createDate" placeholder="创建时间" clearable />
				</el-form-item>
			</el-col>
			<el-col :span="8">
				<el-form-item label="最后登录时间" prop="loginDate">
					<el-input v-model="user.loginDate" placeholder="最后登录时间" clearable />
				</el-form-item>
			</el-col>
		</el-row>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-button type="primary" @click="doList">查询</el-button>
				<el-button type="default" @click="doFormReset">重置</el-button>
				<!-- <el-button type="danger" @click="showLoginPage">登录</el-button>
				<el-button type="danger" @click="showRegisterPage">注册</el-button> -->
			</el-col>
		</el-row>
	</el-form>


	<!-- 	table 数据表格 -->
	<el-row>
		<el-col :span="24">
			<el-table :header-cell-style="{backgroundColor:'#F4F7FA',color:'gray'}" :data="tableData" stripe
				show-overflow-tooltip>
				<el-table-column type="index" width="50" />
				<el-table-column prop="user_name" label="用户昵称" sortable />
				<el-table-column prop="user_email" label="用户邮箱" sortable />
				<el-table-column prop="user_sjh" label="用户手机号" sortable />
				<el-table-column prop="user_sex" label="用户性别" sortable>
					<template #default="scope">
						<span v-if="scope.row.user_sex === 2">女</span>
						<span v-if="scope.row.user_sex === 1">男</span>
						<span v-if="scope.row.user_sex === 3">未知</span>
					</template>
				</el-table-column>

				<el-table-column prop="createDate" label="创建时间" min-width="70px" />
				<el-table-column prop="loginDate" label="最后登录时间" min-width="70px" />
				<el-table-column label="详情&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除" fixed="right" width="230">
					<template #default="scope">
						<el-button type="primary" :icon="Expand" circle size="large" @click="showDetailPage(scope.row)"></el-button>
						<!-- <el-button type="warning" @click="showUpdatePage(scope.row)">更新</el-button> -->
						 <!-- <el-button type="danger" :icon="Delete" circle size="large" @click="doDelete(scope.row)" /> -->
						      <el-button type="danger" :icon="Delete" circle size="large" @click="doDelete(scope.row)" />

					</template>
				</el-table-column>
				
			</el-table>
			<el-pagination style="float:right" v-model:current-page="page.pageNum" v-model:page-size="page.pageSize"
				:page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="page.total"
				@change="doList" />
		</el-col>
	</el-row>
	<!-- 详情页面 -->
	<detail-page ref="detailPageRef"></detail-page>
	
	<login-page ref="loginPageRef"></login-page>
	<register-page ref="registerPageRef"></register-page>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import axios from 'axios';
	import { ElMessage, FormInstance,ElMessageBox } from 'element-plus'
	import DetailPage from './DetailPage.vue';
	import RegisterPage from '../../RegisterPage.vue'
	import LoginPage from '../../LoginPage.vue'
	

	import {
	  Delete,
	  Expand,
	} from '@element-plus/icons-vue'
	const registerPageRef = ref();
	const showRegisterPage = () => {
		registerPageRef.value.handleRegisterForm();
	}
	
	const loginPageRef = ref();
	const showLoginPage = () => {
		loginPageRef.value.handleLoginForm();
	}

	const detailPageRef = ref();
	const showDetailPage = (obj) => {
		detailPageRef.value.handleDetailData(obj);
	}

	//------------------------- from 表单 -----------------------------
	// 查询条件
	const user = ref({
		user_name: '',
		user_sjh: '',
		user_email: '',
		user_sex: null,
		createDate: '',
		loginDate: ''

	})
	// 声明一个表单实例的ref
	const selectFormRef = ref<FormInstance>()
	// 重置表单的函数
	const doFormReset = () => {
		// 重置表单字段
		selectFormRef.value.resetFields()
		// 重置页面状态
		doPageReset();
	}

	// -------------------------- table 表格----------------------------
	// 表格数据
	const tableData = ref([
	]);

	// 分页信息
	const page = ref({
		pageNum: 1,
		pageSize: 5,
		pages: 0,
		total: 0
	})

	const doPageReset = () => {
		page.value.pageNum = 1;
		page.value.pageSize = 5;
	}


	//--------------------------- CRUD ---------------------------
	// 查询
	const doList = () => {
		axios({
			url: '/api/user/list',
			method: 'GET',
			params: Object.assign({}, user.value, { pageNum: page.value.pageNum, pageSize: page.value.pageSize })
		}).then(response => {
			console.log(response.data)
			tableData.value = response.data.list;
			// 分页信息
			page.value.pages = response.data.pages;
			page.value.total = response.data.total;
		});
	}
const doDelete = (user) => {
  ElMessageBox.confirm(
    '确定删除这个用户吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 执行删除请求
      axios({
        url: "/api/user/" + user.user_id,
        method: 'DELETE',
      })
        .then(response => {
          // 请求成功处理
          if (response.data === true) {
            doFlushPage(); // 删除成功，查询刷新表格数据
            ElMessage.success('删除成功');
          } else {
            ElMessage.error('删除失败');
          }
        })
        .catch(error => {
          // 请求失败处理
          ElMessage({
            type: 'error',
            message: '删除失败: ' + error.message,
          });
        });
    })
    .catch(() => {
      // 用户点击了取消按钮
      ElMessage({
        type: 'info',
        message: '已取消删除',
      });
    });
};

	// 删除
	// const doDelete = (user) => {
	// 	axios({
	// 		url: "/api/user/" + user.user_id,
	// 		method: 'DELETE',
	// 	}).then(response => {
	// 		if (response.data === true) {
	// 			doFlushPage();		// 删除成功，查询刷新表格数据
	// 			ElMessage.success('删除成功');
	// 		} else {
	// 			ElMessage.error('删除失败');
	// 		}
	// 	});
	// }

	const doFlushPage = () => {
		doList();

	}

	onMounted(() => {
		doList();
	});
</script>

<style scoped>
</style>